<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒须图：type = boxplot</title>
  <script src="./echarts.js"></script>
  <script src="./tool/dataTool.js"></script>
  <style lang="css">
    #chart1,
    #chart2 {
      width: 100%;
      height: 668px;
      /* border: 1px solid red; */
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    var data = [
      [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
      [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
      [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
      [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
      [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
    ]
    data = echarts.dataTool.prepareBoxplotData(data)
    console.log(data)
    const myChart1 = echarts.init(document.getElementById('chart1'))

    myChart1.setOption({
      title: [
        {
          text: 'Michelson-Morley Experiment',
          left: 'center'
        },
        {
          text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
          borderColor: '#999',
          borderWidth: 1,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            lineHeight: 20
          },
          left: '10%',
          top: '90%'
        }
      ],
      tooltip: {},
      grid: {
        left: '10%',
        right: '10%',
        bottom: '15%'
      },
      xAxis: {
        type: 'category',
        data: data.axisData,
        axisLabel: {
          formatter: 'expr {value}'
        },
      },
      yAxis: {
        type: 'value',
        name: 'km/s minus 299,000',
      },
      series: [
        {
          name: 'boxplot',
          type: 'boxplot',
          data: data.boxData,
          tooltip: {
            formatter (param) {
              return [
                'Expriment: ' + param.name + ':',
                'upper: ' + param.data[5], // 最大值
                'Q3: ' + param.data[4], // 上四分位数
                'median:' + param.data[3], // 中位数
                'Q1: ' + param.data[2], // 下四分位数
                'lower :' + param.data[1] // 最小值
              ].join('<br/>')
            },
          },
        },
        {
          name: 'outlier', // 异常值
          type: 'scatter',
          data: data.outliers,
        }
      ]
    })
  </script>
</body>

</html>